<template>
	<view class="card">
		<view class="top">
			<image :src="posterAvatar" mode="widthFix" style="border-radius: 75%;" class="headimg"></image>
			<view class="fontgroup">
				<view style="display: flex;align-items: center;">
					<h4 style="color: #002150;margin-right: 10px;">{{name}}</h4>
					<button class="cu-btn block line-white sm" @click="say">
						<text class="cuIcon-message text-xl" style="color: black; letter-spacing: 1px;">联系</text>
					</button>
				</view>
				<view class="text-left text-sm" style="color: #7A869A; letter-spacing: 1.5px;margin-top: 5px;">
					{{time}}
				</view>
			</view>
		</view>
		<view class="Content Con" v-if="status&&more"
			style="color: #002251!important;font-weight: 550;line-height: 30px;margin-left: 10px;margin-right: 20px;margin-bottom: 10px;letter-spacing: 1px;width: 22rem;max-height: 150px;margin: 0 auto;word-wrap: break-word;margin-top: 15;">
			{{Content}}
		</view>
		<view class="C" v-else
			style="color: #002251!important;font-weight: 550;line-height: 30px;margin-left: 10px;margin-right: 20px;margin-bottom: 10px;letter-spacing: 1px;width: 22rem;margin: 0 auto;word-wrap: break-word;margin-top: 15;">
			{{Content}}
		</view>
		<view class="text-blue" style="width: 22rem;text-align: right;margin-bottom: 10px;"
			v-if="status==true&&more==true" @click="showMore">查看更多</view>
		<view class="text-blue" style="width: 22rem;text-align: right;margin-bottom: 10px;"
			v-if="status==true&&more==false" @click="hideMore">收起</view>
		<div class="grid-container"
			:style="{ gridTemplateColumns: `repeat(${column}, 1fr)`, gridTemplateRows: `repeat(${row}, 1fr)` }">
			<view class="grid-item" v-for="(item, index) in imgList" :key="index"
				:style="'background-image: url(' + item + ');'">
			</view>
		</div>
		<!-- <view class="text-gray text-lg text-right" style="margin-top: 2vh;margin-right: 10vw;">
			<text class="cuIcon-like margin-lr-xs">赞</text>
		</view> -->
	</view>
	<!-- <hr style="width: 80vw;margin: 0 auto;border: none;
    border-top: 0.5px solid #808080;" /> -->
	<van-divider />

</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		onMounted,
		defineProps,
		toRefs
	} from 'vue'
	const props = defineProps({
		id: Number,
		postId: Number,
		posterAvatar: String,
		content: String,
		name: String,
		time: String
	})
	const {
		name,
		id,
		time,
		postId,
		posterAvatar,
		content
	} = toRefs(props)
	const temp=content.value.split('/*img*/')
	const imgList = temp.length>1 ?JSON.parse(temp[1] ): []
	const Content =  content.value.split('/*img*/')[0] 
	onMounted(() => {
		uni.createSelectorQuery()
			.in(this)
			.select('.C')
			.boundingClientRect(data => {
				console.log('内容高度为：', data.height);
				if (data.height > 150)
					status.value = true
				more.value = true
			})
			.exec();
		countImg()
	})
	const countImg = () => {
		if (imgList.length == 1) {
			column.value = 1
			row.value = 1
		} else if (imgList.length == 2) {
			console.log('为2')
			column.value = 2
			row.value = 1
		} else if (imgList.length == 3) {
			column.value = 3
			row.value = 1
		} else if (imgList.length == 4) {
			column.value = 2
			row.value = 2
		} else if (imgList.length == 5 || imgList.length == 6) {
			column.value = 3
			row.value = 2
		} else if (imgList.length == 0) {
			column.value = 0
			row.value = 0
		} else {
			column.value = 3
			row.value = 3
		}
	}
	const status = ref(false) //显示全部
	const more = ref(false) //控制按钮
	const showMore = () => {
		more.value = false
	}
	const hideMore = () => {
		more.value = true
	}
	const Posterid = ref('')
	const column = ref('3')
	const row = ref('3')
	const Name = ref('')
	
	const say = () => {
		let ifConnect = uni.getStorageSync('AlreadyConnect')
		if (ifConnect) {
			uni.navigateTo({
				url: `/subpkg/chat_detail/chat_detail?name=${name.value}&src=${posterAvatar.value}&userid=${postId.value}`
			})
		} else {
			uni.setStorageSync('detail', JSON.stringify({
				name: name.value,
				avator: posterAvatar.value,
				userid: postId.value
			}))
			uni.switchTab({
				url: '/pages/Chat/Chat'
			})
		}
	}
	const Time = ref('')
	const HeadImg = ref('')
	const Id = ref('')
</script>

<style scoped lang="less">
	.Content {
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 5;
		/*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden;
		/*溢出隐藏*/
	}

	.card {
		width: 100%;
		// border: 1px solid black;
		padding: 20px 10px;
		padding-bottom: 0px;
		padding-top: 0px;

		.top {
			display: flex;
			margin-bottom: 0;

			.headimg {
				margin-left: 10px;
				width: 50px;
				margin-right: 20px;
			}
		}
	}

	.grid-container {
		padding: 0 10px;
		display: grid;
		margin-top: 15px;
		// grid-template-columns: repeat(3, 1fr);
		grid-gap: 7px;
	}

	.grid-item {
		height: 120px;
		width: 120px;
		background-color: #ddd;
		padding: 20px;
		text-align: center;
		background-size: cover;
		border-radius: 12px;
	}
</style>